<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@include file="/WEB-INF/base.jspf"%>
<style>
 #date1 {
	 margin: 2px;  
	 height: 37px;
}

#date2 {
	margin: 2px;
	height: 37px;
}
.modal-dialog {
	max-width: 1000px;
}

.select-lx {
	margin: 2px;
	height: 37px;
}
.layui-inline {
	height: 100px;
	margin-top:15px;
}

#hymc {
	margin: 2px;
	height: 37px;
}
#daili {
  width:199px;
  height:37px;
}
#ordernum{
  margin: 2px;
  height:37px;
}
#table_id_example_paginate{
 margin-right:100px;
}
.class-input-pageNumber{
    
	width:40px;
	height:23px;
	position: absolute;
	right:550px;
	top:12px;
}
.class-span-searchBtn{
	height:24px;
	width:36px;
	font-size:14px;
	text-algin:center;
	line-height:25px;
	padding:0!important;
	position: absolute;
	right:500px;
	top:12px;
}
.dataTables_length{
	margin-top:12px;
	margin-left:50px;
}
.tableSearch{
    position: relative;
}
.hidden-c {
	display:none;
}

.btn-c-dealShenQing {
	display:none;
}
table th,table tr,table td {
text-align: center;
vertical-align:middle;
}
[disabled] {
	cursor: not-allowed;
}
</style>
	<div class="layui-inline">
		<div class="layui-inline">
			<input type="text" id="date1" placeholder="开始时间" value=""><br> 
			<input type="text" id="date2" placeholder="结束时间" value="">
		</div>
		<div class="layui-inline">
			<input type="text" id="ordernum" placeholder="订单号" value=""> 
			<select id="jelx" class="select-lx">
				<option value="">金额类型</option>
				<option value="在线充值">&nbsp;&nbsp;在线充值</option>
				<option value="人工加款">&nbsp;&nbsp;人工加款</option>
				<option value="在线提款">&nbsp;&nbsp;在线提款</option>
				<option value="人工扣款">&nbsp;&nbsp;人工扣款</option>
				<option value="提款手续费">&nbsp;&nbsp;提款手续费</option>
				<option value="提款失败">&nbsp;&nbsp;提款失败</option>
				<option value="手续费退还">&nbsp;&nbsp;手续费退还</option>
				<option value="每日返水">&nbsp;&nbsp;每日返水</option>
				<option value="每月返水">&nbsp;&nbsp;每月返水</option>
				<option value="代理返点">&nbsp;&nbsp;代理返点</option>
				<option value="每日签到">&nbsp;&nbsp;每日签到</option>
				<option value="幸运转盘">&nbsp;&nbsp;幸运转盘</option>
				<option value="红包领取">&nbsp;&nbsp;红包领取</option>
				<option value="红包扣款">&nbsp;&nbsp;红包扣款</option>
				<option value="注册赠送">&nbsp;&nbsp;注册赠送</option>
				<option value="充值赠送">&nbsp;&nbsp;充值赠送</option>
				<option value="活动赠送">&nbsp;&nbsp;活动赠送</option>
			</select>
			<select id="cplx" class="select-lx">
				<option value="">彩票类型</option>
				<option value="彩票投注">&nbsp;&nbsp;彩票投注</option>
				<option value="系统彩投注">&nbsp;&nbsp;系统彩投注</option>
				<option value="彩票派奖">&nbsp;&nbsp;彩票派奖</option>
				<option value="系统彩派奖">&nbsp;&nbsp;系统彩派奖</option>
				<option value="彩票撤单">&nbsp;&nbsp;彩票撤单</option>
				<option value="系统彩撤单">&nbsp;&nbsp;系统彩撤单</option>
				<option value="和局退还本金">&nbsp;&nbsp;和局退还本金</option>
				<option value="港彩特码B返水">&nbsp;&nbsp;港彩特码B返水</option>
				<option value="开奖异常">&nbsp;&nbsp;开奖异常</option>
				<option value="百家乐投注">&nbsp;&nbsp;百家乐投注</option>
			</select>
			<button class="layui-btn layui-btn-radius" id="btn_search">查询</button>
			<br> 
			<input type="text" id="hymc" placeholder="会员名称" value=""> 
			<input type="text" id="daili" placeholder="代理及下线查询" value="">
			<button class="layui-btn layui-btn-radius" id="button-i-resetTableContent" style="margin-left:27px;">重置</button>
		</div>
	</div>
			<div>
				<table class="class-tableDataTable class-table-needClick display table table-striped table-bordered table-hover" id="hyzb">
					<thead>
						<tr>
							<th>用户账号</th>
							<th>变动类型</th>
							<th>订单号</th>
							<th>变动前金额</th>
							<th>变动金额</th>
							<th>变动后金额</th>
							<th>变动时间</th>
							<th>操作人员</th>
							<th>操作备注</th>
						</tr>
					</thead>
					<tbody>
					</tbody>
				</table>
			</div>
	<script>
		 layui.use('laydate', function() {
			var laydate = layui.laydate;
			//执行一个laydate实例
			laydate.render({
				elem : '#date1' //指定元素
			});
			laydate.render({
				elem : '#date2' //指定元素
			});
		});
		 
			function dataTable01(){
				var oTable=	$("#hyzb").DataTable({
						 "bProcessing" : false, // 是否显示取数据时的那个等待提示
						"bServerSide" : true,//这个用来指明是通过服务端来取数据
						 "bPaginate" : true, //是否显示分页 
						"sAjaxSource" : "/zhgl/findUserWaterRecord.do",//这个是请求的地址
						"fnServerData" : retrieveData, // 获取数据的处理函数
						"destroy":true,
					      // "bPaginate": true,
					       "bLengthChange": true,      
					      "bSort": false,
					      // "bInfo": true,
					      "bAutoWidth": false,
//					         "bServerSide":true,
					      'aLengthMenu':[5,10, 20], 
					       "searching": false,  
					        "pagingType": "simple_numbers",
					       "dom": "t<'tableinfo'i<'tableSearch'p>l>", 
					       
					       "language": {//语言设置  
					            "lengthMenu": "每页显示 _MENU_ 条记录",     
					            "zeroRecords": "没有检索到数据",     
					            "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",     
					            "info": "没有数据",     
					            "oPaginate": {     
					                "sFirst": "首页",     
					                "sPrevious": "前一页",     
					                "sNext": "后一页",     
					                "sLast": "尾页"    
					          	},
					            "search":"",
					            "searchPlaceholder": "请输入关键字",
					            "infoFiltered":   "(从  _MAX_ 记录中搜索出结果)",
					            "infoEmpty":      "没有找到匹配的信息",
					         },  
					         "columnDefs": [{"defaultContent": "",
	                              "targets": "_all"}],
	                              "columns": [
	     		                     { "data": "huiyuanzh" },
	     		                     { "data": "bdtype" },
	     		                     { "data": "ordernum" },
	     		                     { "data": "bdqjine" },
	     		                     { "data": "bdjine" },
	     		                     { "data": "bdhjine" },
	     		                     { "data": "createtime" },
	     		                     { "data": "czname" },
	     		                     { "data": "beizhu" }
	     		                 ],	 
					})

		function retrieveData(sSource, aoData, fnCallback) {
					$.ajax({
						url : sSource,//这个就是请求地址对应sAjaxSource
						data : {
							"pageCount":aoData[0].value,
							"startIndex":aoData[3].value,
							"lineCount":aoData[4].value,
							
						},//这个是把datatable的一些基本数据传给后台,比如起始位置,每页显示的行数
						type : 'post',
						dataType : 'json',
						async : false,
						 
						success : function(result) { 
							fnCallback(result);//把返回的数据传给这个方法就可以了,datatable会自动绑定数据的
						},
						error : function(msg) {
						}
					});
				}
			}
		dataTable01();
		insertSearchBtn()
		document.querySelector("#btn_search").addEventListener("click", function(event) {
			if($("#date1").val()=="" && $("#date2").val()=="" &&  $("#ordernum").val()==""
				&& $("#jelx").val()=="" && $("#cplx").val()=="" && $("#hymc").val()=="" && $("#daili").val()==""){
				 return 
			 }	
			else{
				var oTable=	$("#hyzb").DataTable({
					 "bProcessing" : false, // 是否显示取数据时的那个等待提示
					"bServerSide" : true,//这个用来指明是通过服务端来取数据
					 "bPaginate" : true, //是否显示分页 
					"sAjaxSource" : "/zhgl/likeFindUserWaterRecord.do",//这个是请求的地址
					"fnServerData" : retrieveData, // 获取数据的处理函数
					"destroy":true,
				      // "bPaginate": true,
				       "bLengthChange": true,      
				      "bSort": false,
				      // "bInfo": true,
				      "bAutoWidth": false,
//				         "bServerSide":true,
				      'aLengthMenu':[5,10, 20], 
				       "searching": false,  
				      /*  "pagingType": "simple_numbers",
				       "dom": "t<'tableinfo'i<'tableSearch'p>l>",  */
				       
				       "language": {//语言设置  
				            "lengthMenu": "每页显示 _MENU_ 条记录",     
				            "zeroRecords": "没有检索到数据",     
				            "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",     
				            "info": "没有数据",     
				            "oPaginate": {     
				                "sFirst": "首页",     
				                "sPrevious": "前一页",     
				                "sNext": "后一页",     
				                "sLast": "尾页"    
				          	},
				            "search":"",
				            "searchPlaceholder": "请输入关键字",
				            "infoFiltered":   "(从  _MAX_ 记录中搜索出结果)",
				            "infoEmpty":      "没有找到匹配的信息",
				         },  
				         "columnDefs": [{"defaultContent": "",
                             "targets": "_all"}],
                             "columns": [
    		                     { "data": "huiyuanzh" },
    		                     { "data": "bdtype" },
    		                     { "data": "ordernum" },
    		                     { "data": "bdqjine" },
    		                     { "data": "bdjine" },
    		                     { "data": "bdhjine" },
    		                     { "data": "createtime" },
    		                     { "data": "czname" },
    		                     { "data": "beizhu" }
    		                 ],	 
				})

	function retrieveData(sSource, aoData, fnCallback) {
				$.ajax({
					url : sSource,//这个就是请求地址对应sAjaxSource
					data : {
						"pageCount":aoData[0].value,
						"startIndex":aoData[3].value,
						"lineCount":aoData[4].value,
						"date1" : $('#date1').val(),
		    	        "date2" : $('#date2').val(),
		    	        "bdtype" : $('#jelx').val() || $('#cplx').val(),
		    	        "ordernum" : $('#ordernum').val(),
		    	        "huiyuanzh": $('#hymc').val(),
		    	        "daili": $('#daili').val(),
						
					},//这个是把datatable的一些基本数据传给后台,比如起始位置,每页显示的行数
					type : 'post',
					dataType : 'json',
					async : false,
					 
					success : function(result) { 
						fnCallback(result);//把返回的数据传给这个方法就可以了,datatable会自动绑定数据的
					},
					error : function(msg) {
					}
				});
			}
			}
		})
		$("#button-i-resetTableContent").on("click", function(event) {
			dataTable01();
			 $('#date1').val("");
	         $('#date2').val("");
	         $('#jelx').val("");
	         $('#cplx').val("");
	         $('#hymc').val("");
	         $('#daili').val("");
		})
		$("#jelx").on("change", function(e) {
			if ($(e.currentTarget).val() == "") {
				$("#cplx").prop("disabled", false)
			} else {
				$("#cplx").prop("disabled", true)
			}
		})
		$("#cplx").on("change", function(e) {
			if ($(e.currentTarget).val() == "") {
				$("#jelx").prop("disabled", false)
			} else {
				$("#jelx").prop("disabled", true)
			}			
		})		
	</script>
